<template>
  <div class="TabBar-wrapper">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item v-for="(item, index) in icon" :key="index">
        <template #icon="props">
          <div class="logo">
            <i class="iconfont" :class="props.active = item.image"></i>
          </div>
        </template>
        <span>{{item.tip}}</span>
      </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
let active = ref(0)
let obj = reactive({
  '/home':0,
  '/mine':2,
})
const icon = reactive([
  {
    image:'icon-home',
    tip:'首页'
  },

  {
    image:'icon-jiahao',
    tip:''
  },

  {
    image:'icon-icon24',
    tip:'我的'
  }
  ])
onMounted(()=>{
  active.value = obj[location.pathname]
})
const onChange = (index)=>{
  if(index == 0){
    router.push('/home')
  }

  else if(index == 2){
    router.push('/mine')
  }
}
</script>

<style lang='less' scoped>
.iconfont {
  font-size: 20px;
}
.van-tabbar{
  box-shadow: 0 -2px 10px 0px rgb(236, 237, 239,0.2);
}
.van-tabbar-item:nth-child(2){
  position: relative;
  z-index: 2;
  top: -10px;
  background: #fff;
  border-radius: 50%;
  box-sizing: border-box;
  border-top: 1px solid rgba(176, 176, 176, 0.136);
  height: 65px;
}
.van-tabbar-item:nth-child(2) .logo {
  width: 100%;
  height: 100%;
  background: rgba(1,102,255);
  border-radius: 50%;
  .iconfont{
    font-size: 50px;
    color: #fff;
  }
}
</style>